<template>
  <div class="oe-stu-tickets" id="tickets" style="min-height: 700px;background-color: #fff" v-loading="loading">
    <div class="dom-fa clearfix">
      <div id="print">
        <div id="pdfDom">
          <div style="margin:20px">
            <a-row style="border: 1px solid #000;">
              <a-col :span="24" class="zkzc">
                <h2 class="zkz">准考证</h2>
              </a-col>
              <a-col :span="20" height="150" style="font-weight: bold;">
                <div class="first-data">
                  <div class="list first-data-fix">
                    <span>学号</span>
                  </div>
                  <div class="list">
                    <span>{{ userNo }}</span>
                  </div>
                </div>
                <div class="first-data">
                  <div class="list first-data-fix">
                    <span>姓名</span>
                  </div>
                  <div class="list">
                    <span>{{ DisplayName }}</span>
                  </div>
                </div>
                <div class="sex-data">
                  <div class="list first-data-fix">
                    <span>性别</span>
                  </div>
                  <div class="list">
                    <span>{{ sex }}</span>
                  </div>
                </div>
              </a-col>
              <a-col :span="4" class="img-col">
                <img :src="AvatorUrl" width="100%" height="150" />
              </a-col>
              <a-col :span="24" class="batch-name">
                <div class="title">{{batchName}}</div>
              </a-col>
              <a-col :span="9" class="title-col">
                <div class="title">日期</div>
              </a-col>
              <a-col :span="6" class="title-col">
                <div class="title">考试名称</div>
              </a-col>
              <a-col :span="3" class="title-col">
                <div class="title">考试地点</div>
              </a-col>
              <a-col :span="3" class="title-col">
                <div class="title">考场</div>
              </a-col>
              <a-col :span="3" style="display:flex;">
                <div class="title">座位</div>
              </a-col>
            </a-row>
            <a-row
              style="border-left: 1px solid #000;border-right: 1px solid #000;display:flex;"
              v-for="(item, index) in examList"
              :key="index"
            >
              <a-col :span="9" class="data-list data-list-br">
                <div>{{ item.StartTime }}~{{item.EndTime}}</div>
              </a-col>
              <a-col :span="6" class="data-list data-list-br">
                <div>{{item.Title}}</div>
              </a-col>
              <a-col :span="3" class="data-list data-list-br">
                <div>{{item.Address}}</div>
              </a-col>
              <a-col :span="3" class="data-list data-list-br">
                <div>{{item.ExamRoomName}}</div>
              </a-col>
              <a-col :span="3" class="data-list">
                <div>{{item.SeatNumber}}</div>
              </a-col>
            </a-row>
            <a-row
              style="border-left: 1px solid #000;border-right: 1px solid #000;border-bottom: 1px solid #000;"
            >
              <a-col :span="24" style="display:flex;">
                <p class="p_style">考生须知</p>
              </a-col>
              <a-col :span="24">
                <div class="align_left">
                  <div v-if="pdfShow" style="margin: 4px 11px;white-space:pre-wrap;">{{stuText}}</div>
                  <div v-html="stuText" v-else style="margin: 4px 11px;white-space:pre-wrap;"></div>
                  <!-- <a-textarea
                    v-else
                    style="width: 100%;"
                    v-model="stuText"
                    placeholder="请输入考生须知"
                    :auto-size="{ minRows: 6, maxRows: 1000 }"
                    maxlength="500"
                    :disabled="true"
                  /> -->
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
      </div>
      <div class="oe-print-btn" style="margin-bottom: 20px;">
        <a-button type="primary" @click="getPdfDom(2)">导出</a-button>
        <a-button type="primary" style="margin-left: 10px;" v-print="'#print'" @click="getPdfDom(1)">打印</a-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      DisplayName: '',
      stuText: '',
      sex: '',
      userNo: '',
      loading: false,
      batchName: '',
      pdfShow: false,
      AvatorUrl: '/common/images/default_avatar.jpg',
      examList: [],
    };
  },
  mounted() {
    this.getStuTickets();
  },
  methods: {
    getPdfDom(type) {
      this.loading = true;
      this.$http
        .post('/api/study/batch/saveLog', {
          batchId: localStorage.getItem('bacthId'),
          type: type
        })
        .then((rst) => {
          this.loading = false;
          let text = this;
          if (rst.code > 0) {
            if (type == 2) {
              window.scrollTo(0, 0);
              window.pageYOffset = 0;
              document.documentElement.scrollTop = 0;
              document.body.scrollTop = 0;
              this.pdfShow = true;
              var that = this;
              setTimeout(() => {
                this.getPdf(that.DisplayName);
              }, 500);
            }
          } else {
            text.$message.error(rst.msg);
          }
        });
    },
    //查看学生准考证
    getStuTickets() {
      this.loading = true;
      this.$http
        .post('/api/study/batch/getAllStuListByBatchId', {
          batchId: localStorage.getItem('bacthId')
        })
        .then((rst) => {
          this.loading = false;
          let text = this;
          if (rst.code > 0) {
            text.DisplayName = rst.stuInfo.DisplayName;
            text.userNo = rst.stuInfo.UserNo;
            text.AvatorUrl = rst.stuInfo.AvatorUrl;
            this.stuText = rst.instructions;
            this.sex = rst.stuInfo.Sex;
            this.batchName = rst.batchName;
            this.examList = rst.stuExamList;
          } else {
            text.$message.error(rst.msg);
          }
        });
    }
  }
};
</script>
